<template>
	<view class="wrap">
		<image class="poster" :src="poster" mode="heightFix"></image>
		<xlcanvas v-if="isReady" :param="diyData" @fail="fail" @success="success"></xlcanvas>
	</view>
</template>

<script>
	import xlcanvas from '@/components/muu-canvas/canvas.vue'

	export default {
		components: {
			xlcanvas,
		},
		props: {
			app: '',
			data: {
				type: Object,
				default: {}
			},
			qrcode: {
				type: String,
				default: ""
			},
			userInfo:{},
			config:{
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				isReady: false,
				diyData: {},
				poster: "",
			};
		},
		created() {
			let system = uni.getSystemInfoSync();
			this.height = system.windowHeight * 2;
			this.width = system.windowWidth * 2;
			console.log('二维码路径', this.qrcode)
		},
		methods: {
			
			draw(redraw){
				if(redraw){
					this.isReady = false;
				}
				if(!this.isReady){
					this.diyData = this.getParam();
					this.isReady = true;
				}
			},
			
			getParam() {
				let w = 750,
					h = 1206,
					config = this.config,
					userInfo = this.userInfo,
					data = this.data;
				// 封面图宽高定义
				let cover_w,cover_h
				
				let avatar = userInfo.memberInfo.avatar ? userInfo.memberInfo.avatar : this.util.rootUrl() + 'addons/' + this.app + '/resource/images/avatar@2x.png'
				uni.getImageInfo({
					src: avatar,
					fail: (res)=>{
						console.log(res)
						avatar = this.util.rootUrl() + 'addons/' + this.app + '/resource/images/avatar@2x.png'
					}
				})
				
				let pw = 100;
				
				let params = {
					width: w,
					height: h,
					bgColor: '#FAF7FA',
					paths: {
						rect: [
							{x: pw, y: 134, w: 548, h: 844, r: 20, type: "fill", color: "#ffffff"},
							{x: pw, y: 472, w: 548, h: 372, type: "fill", color: "#ffffff"},
							//{x: pw + 38, y: 528, w: 64, h: 64, r:32, type: "fill", color: "#FFDC00"},
						]
					},
					pics: [
						{x: pw, y: 134, w: 548, h: 358, type: "fill", src: this.util.rootUrl() + 'addons/' + this.app + '/resource/images/share/1-head.png'},
						{x: pw, y: 134, w: 548, h: 411, r: 6, src: data.cover_400},
						
						{x: pw + 50, y: 550, w: 36, h: 22, r: 6, src: this.util.rootUrl() + 'addons/' + this.app + '/resource/images/crown@2x.png'},
						{x: pw + 40, y: 570, w: 60, h: 60, r: 30, src: avatar},//用户头像
						{x: pw + 364, y: 812, w: 140, h: 140,r: 15, src: this.qrcode},
						
					],
					texts: [
						//信息
						//{w:w,y:558,font:36,align: "center",color: "#000000",text: data.title},
						//用户信息
						{x: 226, y: 598, font: 28, color: "#000022", text: userInfo.memberInfo.nickname},
						{x: pw + 40, y: 659, w:475, font: 26,multiple:true,lineHeight:40,clamp:3, color: "#999999", text: data.description},
						{w:w,y:784,font:36,align: "center",color: "#ECECEC",text: "- - - - - - - - - - - - - - - - - - - - -"},
						//公众号信息及分享码
						{x: pw + 40, y: 840, w:315, font: 26,multiple:true,clamp:1, color: "#222222", text: config.title ? config.title : 'MuuCmf开发框架'},
						{x: pw + 40, y: 882, w:315, font: 24,multiple:true,clamp:1, color: "#777777", text: config.copyright.title ? config.copyright.title : '北京火木科技有限公司'},
						{w:w,y: 1040,font:24,align: "center",color: "#777777",text: "识别上面二维码加入"},
					],
				}
				
				return params
			},
			
			fail(e) {
				//console.log('muu return', e);
				uni.showModal({
					title: '错误提示',
					content: e.tips + e.err.err,
					showCancel: false,
					success: function (res) {
						
					}
				});
				this.isReady = false;
				uni.hideLoading();
			},
			success(e) {
				this.poster = e.res.tempFilePath;
				uni.hideLoading();
				this.$emit('callbackPoster',{
					current:0,
					src:this.poster
				})
			},
		},

	}
</script>

<style lang="scss">
	.wrap{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.poster{
			height: 70vh;
			box-shadow: 10px 8px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			border-radius: 20rpx;
			margin-bottom: 194rpx;
		}
	}
</style>
